<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p></p>
    <script>
        // 直接代理这个数据结构  允许动态添加属性  
        // 可以捕获到新增属性的行为  (获取和修改 )

        // es6 新增的   实际上是对 Object.defineProperties的一个升级
        // 语法: new Proxy(代理对象,配置项)

        const p = document.querySelector('p');
        const origin = {name:'阿强',age:18};
        // 自动的遍历对象 自动的拷贝一份 
        // data 就是代理  
        // 通过对代理的 属性的操作  把原始数据劫持到嗯自己身上  
        // 把代理的数据进行渲染 
        const data = new Proxy(origin,{
            get(obj,key){
                return obj[key];
            },

            set(obj,key,val){
                obj[key] = val;
                console.log(`你把对象内的${key} 对应的值修改为 ${val}`);
                bindHtml();
                return true;
            }
        })

        bindHtml()
        function bindHtml(){
            p.innerHTML = '我叫'+data.name + '今年'+data.age+'岁'
        }

        data.name = '人狠话不多,社会我东营一哥';
        data.age = 20;

        // 除了对已有的数据进行 监控 捕获相应的行为  
        // 对对象后来添加的属性 也能监控 并且捕获相应的行为 
        data.gender = '男';
        data.height = '180cm';
        data.weight = '50kg';


        console.log(data);


    </script>
</body>
</html>